<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ include file="common.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>品质管理</title>
<script type="text/javascript">
$(function() {
	$(".form_datetime").datetimepicker({
		/* 显示格式 */       
		format: "yyyy-mm-dd",
	    /* 完成关闭 */
	    autoclose: true,
	   /*  今天 时间按钮*/
	    todayBtn: true, 
	   /*  今天的时间变黄色 */
	    todayHighlight:true, 
	    /* 定位 */
	    pickerPosition: "bottom-left",
	    /* 最小值 */
	    minuteStep: 10,
	    /*  语言 */
	    language: 'zh-CN',  
		/* 分上午下午 */
	    showMeridian: true,
	    /* 分的所有 */
	    minuteStep:true,
	    /* 月视图 */
	    startView: 2,
	    /* 日期时间选择器所能够提供的最精确的时间选择视图 */
		minView: 2
	}).on('hide',function(e) {  
		e.stopPropagation(); //e.stopPropagation()阻止事件冒泡
	});
});
</script>
<script type="text/javascript">
	$(function() {
		$('#btn_query').click(function() {
			$("#tb_search").bootstrapTable('refresh');
			$('#tb_detail').bootstrapTable('refresh');
		});
		//1.初始化Table
		var oTable = new TableInit();
		oTable.Init();

		//2.初始化Button的点击事件
		var oButtonInit = new ButtonInit();
		oButtonInit.Init();
		
		//动态加载车间
		getWorkShop();
	});
	var TableInit = function() {
		var oTableInit = new Object();
		//初始化Table
		oTableInit.Init = function() {
			$("#tb_search").bootstrapTable({
				url : '${pageContext.request.contextPath }/quality/equipment.do', //请求后台的URL（*）
				method : 'get', //请求方式（*）
				toolbar : '#toolbar', //工具按钮用哪个容器
				pagination : true, //是否显示分页（*）
				striped : true, //是否显示行间隔色
				sortable : false, //是否启用排序
				sortOrder : "asc", //排序方式
				queryParams : oTableInit.queryParams,//传递参数（*）
				sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
				pageNumber : 1, //初始化加载第一页，默认第一页
				pageSize : 10, //每页的记录行数（*）
				pageList : [ 10, 20, 30 ], //可供选择的每页的行数（*）
				strictSearch : true,
				clickToSelect : true, //是否启用点击选中行
				height : 440, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
				uniqueId : "ID", //每一行的唯一标识，一般为主键列
				detailView : false, //是否显示父子表
				columns : [ {
					field : 'name',
					align : 'center',
					title : '注塑机编号'
						}, {
					field : 'tonnage',
					align : 'center',
					title : '注塑机吨位'
						}, {
					field : 'remartk',
					align : 'center',
					title : '班次',
					editable: {
				          type: 'select',
				          title: '班次',
				          emptytext: "请选择",
				          source:[{value:"1",text:"白班"},{value:"2",text:"夜班"}]
			              }
					} ],
				//行内编辑触发的方法
				onEditableSave : function(field, row, oldValue, $el) {
					/* 输入框获取的参数 */
			      	var datetime1 = $.trim($("#datetime").val());//获取条件查询中的时间
			    	$('#tb_search').bootstrapTable('resetView');
			    	$.ajax({
			    		type : 'post',
			    		cache : true,
			    		url : '${pageContext.request.contextPath }/quality/work.do',	
			    		data : {datetime:datetime1,remartk:row.remartk,machin:row.eid},
			    		dataType : 'JSON',
			    		success : function(data) {
			    			$("#tb_detail").bootstrapTable('refresh');
			    			$("#tb_detail").bootstrapTable('load',data);	
			    		}
			    	});
			    }//结束行内编辑方法
			});
			
			$("#tb_detail").bootstrapTable({
				method : 'get', //请求方式（*）
				toolbar : '#toolbar', //工具按钮用哪个容器
				striped : true, //是否显示行间隔色
				cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
				pagination : false, //是否显示分页（*） 
				sortable : false, //是否启用排序
				sortOrder : "asc", //排序方式
				sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
				pageNumber : 1, //初始化加载第一页，默认第一页
				strictSearch : true, 
				clickToSelect : true, //是否启用点击选中行
				height : 180, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
				uniqueId : "ID", //每一行的唯一标识，一般为主键列
				detailView : false //是否显示父子表
			});
		};

		//得到查询的参数
		oTableInit.queryParams = function(params) {
			var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
				limit : params.limit, //页面大小
				offset : params.offset, //页码
				datetime : $("#datetime").val(),
				workshop : $("#workshop").val()
			};
			return temp;
		};
		return oTableInit;
	};
	var ButtonInit = function() {
		var oInit = new Object();
		var postdata = {};

		oInit.Init = function() {
			//初始化页面上面的按钮事件
		};

		return oInit;
	};
	//动态获取车间
	function getWorkShop() {
		$.ajax({
			type : "post",
			url : "${pageContext.request.contextPath }/quality/selworkshop.do",
			success : function(data) {
				var str = "<option value='' selected='selected'>--请选择--</option>";
				var json = eval('(' + data + ')');
				for (var i = 0; i < json.data.length; i++) {
					var name = json.data[i].name;
					str += '<option value="'+json.data[i].id+'">' + name + '</option>';
				}
				$("#workshop").append(str);
				$("#workshop").selectpicker('refresh');
			}
		});
	}
</script>
</head>
<body>
	<div class="panel-body" style="padding-bottom: 0px;">
		<div class="panel panel-default">
			<div class="panel-heading">查询条件</div>
			<div class="panel-body">
				<form id="formSearch" class="form-horizontal">
					<div class="form-group" style="margin-top: 15px">
						<label for="datetime" class="col-sm-1 control-label">日期:</label>
						<div class="col-sm-3">
							<input type="text" id="datetime" placeholder="yyyy-mm-dd" 
							class="form_datetime form-control" readonly="readonly">
						</div>
						<label class="control-label col-sm-1" for="workshop">车间:</label>
						<div class="col-sm-3">
							<select class="selectpicker show-tick form-control" id="workshop">
							</select>
						</div>
						<div class="col-sm-3">
							<button type="button" id="btn_query" class="btn btn-primary"
								style="width: 150px; margin-left: 80px;">查询</button>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div style="margin-top: -20px;">
			<table id="tb_search"></table>
			<table id="tb_detail">
				<thead>
					<tr>
						<th data-valign="middle" data-align="center" data-field="cartype" 
							rowspan="2">车种</th>
						<th data-valign="middle" data-align="center" rowspan="2" 
							data-field="nmum">品编</th>
						<th data-valign="middle" data-align="center" rowspan="2" 
							data-field="pname">品名</th>
						<th data-valign="middle" data-align="center" rowspan="2" 
							data-field="snum">生产数量</th>
						<th data-valign="middle" data-align="center" rowspan="2" 
							data-field="good">良品</th>
						<th data-valign="middle" data-align="center" rowspan="2" 
							data-field="ngood">不良品</th>
						<th colspan="4" data-valign="middle" data-align="center">不良品类型</th>
					</tr>
					<tr>
						<th data-valign="middle" data-align="center" data-field="nForming">未成型</th>
						<th data-valign="middle" data-align="center" data-field="deckleEdge">毛边</th>
						<th data-valign="middle" data-align="center" data-field="coldMetal">冷料</th>
						<th data-valign="middle" data-align="center" data-field="brightMark">亮印</th>
					</tr>
				</thead>
			</table>
		</div>
	</div>
</body>
<style>
.table th {
	text-align: center;
}
</style>
</html>